<template>
  <div class="registerDetail">
    <div class="task_header">
      <div class="top_title">
        <div
          class="top_title_back"
          @click="onClickLeft">
          <i class="iconfont icon-back"></i>
        </div>
        <div class="top_title_val">
          {{ $route.meta.title }}
        </div>
        <div
          v-if="dataSource.billStatus != '取消'"
          class="task_transbox"
          @click="cancelApply"
        >
          <div>取消预约</div>
        </div>
      </div>
    </div>

    <div class="task_detail">
      <div class="task_detail_header">
        <div class="task_detail_headerbox">
          <div
            class="title"
            @click.stop="goCarDetail()"
          >{{ dataSource.carNo ? dataSource.carNo : '-' }} </div>
          <div class="name">
            <div class="txt">{{ dataSource.customerName ? dataSource.customerName : '-' }}</div>
            <div class="txt">{{ dataSource.vinCode ? dataSource.vinCode : '-' }}</div>
          </div>
          <div
            v-if="dataSource.billStatus"
            class="status"
            :class="dataSource.billStatus == '保存' ? 'status2' : 'status1'"
          >
            <img
              class="status_icon"
              :src="require(`@/assets/images/${dataSource.billStatus == '保存' ? 'status2' : 'status1'}.png`)"
            />{{
              dataSource.billStatus
            }}
          </div>
        </div>
      </div>
    </div>

    <div class="detailbox_item mt122">
      <div class="detailbox_item_title ">车辆信息</div>
      <div class="detail_content">
        <div class="task_itembox">
          <div class="task_itembox_con">
            <div class="task_label">所属维修中心：</div>
            <div class="task_value">{{ dataSource.fixCenterName ? dataSource.fixCenterName : '- -' }}</div>
          </div>
          <div class="task_itembox_con">
            <div class="task_label">预约服务顾问：</div>
            <div class="task_value">{{ dataSource.empName ? dataSource.empName : '- -' }}</div>
          </div>
          <div class="task_itembox_con">
            <div class="task_label">单据状态：</div>
            <div class="task_value">{{ dataSource.billStatus ? dataSource.billStatus : '- -' }}</div>
          </div>
          <div class="task_itembox_con">
            <div class="task_label">预约登记人：</div>
            <div class="task_value">{{ dataSource.creatorName ? dataSource.creatorName : '- -' }}</div>
          </div>
          <div class="task_itembox_con">
            <div class="task_label">预约登记日：</div>
            <div class="task_value">{{ dataSource.createTime ? dataSource.createTime : '- -' }}</div>
          </div>
          <div class="task_itembox_con">
            <div class="task_label">预约类型：</div>
            <div class="task_value">{{ dataSource.bookingType ? dataSource.bookingType : '- -' }}</div>
          </div>
          <div
            class="task_itembox_con"
            v-if="dataSource.bookingType == '招揽专员预约'"
          >
            <div class="task_label">招揽类型：</div>
            <div class="task_value">{{ dataSource.taskTypeName ? dataSource.taskTypeName : '- -' }}</div>
          </div>
          <div class="task_itembox_con">
            <div class="task_label">工单类型：</div>
            <div class="task_value">{{ dataSource.workBillType ? dataSource.workBillType : '- -' }}</div>
          </div>

          <div class="task_itembox_con">
            <div class="task_label">维修价格类型：</div>
            <div class="task_value">{{ dataSource.repairPrice ? dataSource.repairPrice : '- -' }}</div>
          </div>

          <div class="task_itembox_con">
            <div class="task_label">配件价格类型：</div>
            <div class="task_value">{{ dataSource.mterialPriceType ? dataSource.mterialPriceType : '- -' }}</div>
          </div>
          <div class="task_item_type">
            <div class="task_item_tt">备注：</div>
            <div class="task_item_desc">{{ dataSource.remark ? dataSource.remark : '-' }}</div>
          </div>
          <div v-if="dataSource.billStatus == '取消'">

            <div class="task_itembox_con">
              <div class="task_label">取消日期：</div>
              <div class="task_value">{{ dataSource.cancelDate ? dataSource.cancelDate : '- -' }}</div>
            </div>
            <div class="task_itembox_con">
              <div class="task_label">下次预约时间：</div>
              <div class="task_value">{{ dataSource.nextBookingDate ? dataSource.nextBookingDate : '- -' }}</div>
            </div>

            <div class="task_item_type">
              <div class="task_item_tt">取消原因：</div>
              <div class="task_item_desc">{{ dataSource.bookingCancel ? dataSource.bookingCancel : '-' }}</div>
            </div>
          </div>

        </div>
      </div>
    </div>

    <div class="detailbox_item">
      <div class="detailbox_item_title">联系人信息</div>
      <div class="contact_content">
        <div class="contact_item">
          <div class="contact_top">
            <div class="item_label">客户信息</div>
            <div class="item_icon">
              <img
                class="item_img"
                src="@/assets/images/wechat_icon.png"
                @click="getExList(dataSource)"
              />
              <img
                class="item_img"
                src="@/assets/images/tel_icon.png"
                @click="handleTel(dataSource.mobile1)"
              />
            </div>
          </div>
          <div class="contact_bottom">
            <div class="item_name">
              <div class="txt1">姓名：</div>
              <div class="txt2">{{ dataSource.customerName ? dataSource.customerName : '-' }}</div>
            </div>
            <div class="item_name">
              <div class="txt1">手机号码：</div>
              <div class="txt2">{{ dataSource.mobile1 ? dataSource.mobile1 : '-' }}</div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- 表单 -->
    <div class="formData">

      <!-- 底部按钮 -->
      <div class="footerBtn">
        <div class="submitBtn flex">
          <div
            class="btnbox editBtn"
            @click="handleEditSa"
            v-if="dataSource.billStatus == '审核'"
          >修改预约顾问</div>
          <div
            class="btnbox editBtn"
            v-if="dataSource.billStatus == '保存'"
            @click="editApply"
          >编辑</div>
          <div
            class="btnbox editBtn"
            v-if="dataSource.billStatus == '审核'"
            @click="editTime"
          >修改预约时间</div>
        </div>
      </div>
    </div>
    <van-dialog
      v-model="showDialog"
      title=""
      show-cancel-button
      :showConfirmButton="false"
    >
      <div class="contact_list">
        <div
          class="contact_item flex"
          v-for="(item, index) in contactList"
          :key="index"
        >
          <div class="contact_lt flex">
            <img
              v-if="item.avatar"
              class="contact_header"
              :src="item.avatar"
            />
            <div class="contact_name">
              {{ item.remark ? item.remark : item.name }}
            </div>
            <div
              class="contact_com_wx"
              v-if="item.type == 1"
            >@微信</div>
            <div
              class="contact_com"
              v-if="item.type == 2"
            >@{{ item.corpName ? item.corpName : item.corpFullName }}</div>
          </div>
          <div
            class="contact_btn"
            @click="runWxChat(item)"
          >联系</div>
        </div>
      </div>
    </van-dialog>

    <!-- 更新预约时间 -->
    <van-dialog
      v-model="editTimeVisible"
      title="修改预约时间"
      show-cancel-button
      @confirm="handleEditTime"
      :before-close="beforeCloseUpdateTel"
    >
      <van-field
        v-model="updateTimeData.curDateIn"
        name="当前预约时间"
        label="当前预约时间"
        input-align="right"
        readonly
      ></van-field>
      <van-field
        v-model="updateTimeData.dateIn"
        name="更新预约时间"
        label="更新预约时间"
        input-align="right"
        @click="showTimerPicker = true"
        readonly
        right-icon="arrow"
      ></van-field>
    </van-dialog>
    <!-- 时间选择弹窗 -->
    <van-popup
      v-model="showTimerPicker"
      position="bottom"
    >
      <van-datetime-picker
        v-model="upCurrentDate"
        type="datetime"
        @confirm="onTimeConfirm($event)"
        @cancel="showTimerPicker = false"
        :formatter="formatter"
      />
    </van-popup>

    <!-- 变更顾问 -->
    <van-dialog
      v-model="editsaVisible"
      title="修改预约顾问"
      show-cancel-button
      @confirm="updateServiceConfirm"
      :before-close="beforeCloseUpdateTel"
    >
      <van-field
        v-model="updateServiceData.currentServerPsnName"
        name="当前顾问"
        label="当前顾问"
        input-align="right"
        readonly
      />
      <van-field
        v-model="updateServiceData.empName"
        name="请选择服务顾问"
        label="请选择服务顾问"
        label-width="130px"
        input-align="right"
        placeholder="请选择"
        readonly
        right-icon="arrow"
        @click="handleSelect('empId', 'empName')"
      />
    </van-dialog>
    <van-popup
      v-model="updateSelectVisible"
      position="bottom"
    >
      <van-field
        name="模糊查询"
        input-align="left"
        v-model="likeWho"
        label="模糊查询"
        placeholder="请输入模糊查询关键词"
      />
      <van-picker
        show-toolbar
        :columns="updateColumns"
        @confirm="handleSelectConfirm"
        @cancel="updateSelectVisible = false"
        value-key="name"
      />
    </van-popup>

    <FollowEdit :visible="followEditVisible" :billId="detailId" @close="followEditVisible = false" :dataSource="dataSource"></FollowEdit>

  </div>
</template>

<script>
import { Dialog, Field, Form, Notify, Search, Toast } from 'vant'
import repairApi from '@/api/repairApi'
import commonApi from '@/api/commonApi'
import { getCookies, isPhone } from '@/utils/util.js'
import axios from 'axios'
import qs from 'qs'
import FollowEdit from './components/FollowEdit.vue'

const base_url = process.env.BASE_API
export default {
  name: 'applyRepairEdit',
  components: {
    Search,
    Field,
    Form,
    Toast,
    Notify,
    Dialog,
    FollowEdit
  },
  data() {
    return {
      dataSource: {
        billId: '', //单据ID
        vinCode: '', //车架号
        carNo: '', //车牌号
        customerName: '', //客户名称
        billStatus: '', //单据类型
        mobile1: '', //手机号1
        mobile12: '', //手机号2
        empName: '', //所属服务顾问
        fixCenterName: '', //维修中心
        bookingType: '', //预约类型
        bizDate: '', //预约时间,
        dateIn: '', //预约进场时间,
        carModel: '', //车型
        workBillType: '', //工单类型
        materialPriceType: '', //配件价格
        repairpricetype: '', //维修价格类型
        remark: '', //备注
        creatorName: '',
        createTime: '',
      },
      userId: getCookies('userId'),
      detailId: '',
      showDialog: false,
      contactList: [],
      updateTimeData: {
        curDateIn: '',
        dateIn: '',
      },
      showTimerPicker: false,
      editTimeVisible: false,
      upCurrentDate: new Date(),
      editsaVisible: false,
      likeWho: '',
      likeWhoField: '',
      empList: [],
      updateServiceData: {
        currentServerPsnName: '',
        empName: '',
        empId: '',
        billId: '',
      },
      updateSelectVisible: false,
      updateColumns: [],
      field: '',
      fieldName: '',
      followEditVisible: false,
    }
  },

  watch: {
    likeWho: function (nval, oval) {
      if (nval) {
        let newArr = this.empList.filter((item) => {
          return item.name.indexOf(nval) > -1
        })
        console.log(newArr)
        this.updateColumns = newArr
      } else {
        this.updateColumns = this.empList
      }
    },
  },
  mounted() {
    if (localStorage.getItem('applyBillId')) {
      this.detailId = localStorage.getItem('applyBillId')
      this.getDetail(this.detailId)
    }
  },
  methods: {
    // 获取外部联系人信息
    getExList(data) {
      axios({
        url: `${base_url}/proxy/ext/user/getExList`,
        method: 'post',
        data: qs.stringify(
          // { url: 'http://wycl.autocnd.com:41080/ysc/assessManageDetail' },
          { carNo: data.carNo, name: data.customerName },
          { encode: false }
        ),
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          satoken: getCookies('token'),
        },
      }).then((res) => {
        if (res.data && res.data.data && res.data.data.length != 0) {
          this.contactList = res.data.data
          this.showDialog = true
        } else {
          Notify({ type: 'danger', message: '未找到相关联系人' })
        }

        console.log('获取外部联系人信息:', res)
      })
    },
    runWxChat(data) {
      let vm = this
      axios({
        url: `${base_url}/proxy/qywx/jsdkConfig`,
        method: 'post',
        data: qs.stringify(
          // { url: 'http://wycl.autocnd.com:41080/ysc/assessManageDetail' },
          { url: location.href.split('?')[0], type: 'app' },
          { encode: false }
        ),
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          satoken: getCookies('token'),
        },
      }).then((res) => {
        console.log('jsdkConfig:', res)
        let jsdk = res.data.data
        localStorage.setItem('jsdk', JSON.stringify(res.data.data))
        wx.agentConfig({
          corpid: jsdk.corpid, // 必填，企业微信的corpid，必须与当前登录的企业一致
          agentid: jsdk.agentid, // 必填，企业微信的应用id （e.g. 1000247）
          timestamp: jsdk.timestamp, // 必填，生成签名的时间戳
          nonceStr: jsdk.nonceStr, // 必填，生成签名的随机串
          signature: jsdk.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
          jsApiList: ['openEnterpriseChat'], //必填，传入需要使用的接口名称
          success: function (res) {
            console.log('agentConfig权限成功返回信息:', res)
            wx.openEnterpriseChat({
              // 注意：userIds和externalUserIds至少选填一个。内部群最多2000人；外部群最多500人；如果有微信联系人，最多40人
              userIds: '', //参与会话的企业成员列表，格式为userid1;userid2;...，用分号隔开。
              externalUserIds: data.externalUserid, // 参与会话的外部联系人列表，格式为userId1;userId2;…，用分号隔开。
              groupName: '', // 会话名称。单聊时该参数传入空字符串""即可。
              chatId: '', // 若要打开已有会话，需指定此参数。如果是新建会话，chatId必须为空串
              success: function (res) {
                var chatId = res.chatId //返回当前群聊ID，仅当使用agentConfig注入该接口权限时才返回chatId
                // 回调
              },
              fail: function (res) {
                if (res.errMsg.indexOf('function not exist') > -1) {
                  alert('版本过低请升级')
                }
              },
            })
          },
          fail: function (res) {
            console.log('agentConfig权限失败返回信息:', res)
            if (res.errMsg.indexOf('function not exist') > -1) {
              alert('版本过低请升级')
            }
          },
        })
      })
    },
    getDetail(billId) {
      repairApi
        .queryRepairBookingById({
          billId,
          userId: this.userId,
        })
        .then((res) => {
          if (res.data) {
            this.dataSource = res.data
          }
        })
    },

    cancelApply() {
      this.followEditVisible = true
      // localStorage.setItem('billId', this.dataSource.billId)
      // this.$router.push({
      //   path: '/applyRepairCancel',
      // })
    },
    // 编辑
    editApply() {
      this.$router.push({
        path: '/applyRepairEdit',
        query: { billId: this.dataSource.billId },
      })
    },
    handleTel(tel) {
      if (isPhone()) {
        window.location.href = `tel:${tel}`
      } else {
        Toast('请在手机端使用此功能')
      }
    },
    goCarDetail() {
      this.$router.push({
        path: '/carOrderDetail',
        query: { billId: this.dataSource.carId },
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onTimeConfirm(val) {
      let year = val.getFullYear()
      let month = val.getMonth() + 1
      let day = val.getDate()
      let hour = val.getHours()
      let minute = val.getMinutes()
      // let second = val.getSeconds()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`
      }
      // if (second >= 0 && second <= 9) { second = `0${second}` }
      this.updateTimeData.dateIn = `${year}-${month}-${day} ${hour}:${minute}:00`
      this.showTimerPicker = false
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      } else if (type === 'hour') {
        return `${value}时`
      } else if (type === 'minute') {
        return `${value}分`
      } else if (type === 'second') {
        return `${value}秒`
      }
      return value
    },
    editTime() {
      this.updateTimeData.curDateIn = this.dataSource.dateIn
      this.editTimeVisible = true
    },
    // 修改预约时间
    handleEditTime() {
      if (!this.updateTimeData.dateIn) {
        Toast('请选择预约进场时间')
        return
      }
      let bizDate = new Date(this.dataSource.bizDate).getTime()
      let dateIn = new Date(this.updateTimeData.dateIn).getTime()

      if (dateIn < bizDate) {
        Toast('预计进场日期必须大于等于预约日期！')
        return
      }

      repairApi
        .updateRepairBookDateIn({
          billId: this.dataSource.billId,
          dateIn: this.updateTimeData.dateIn,
        })
        .then((res) => {
          if (res) {
            Toast('更新成功')
            this.editTimeVisible = false
            this.getDetail(this.detailId)
          }
        })
    },
    // 获取服务人员
    getEmpPerson() {
      commonApi
        .getEmpPerson({
          fixCenterId: this.dataSource.fixCenterId,
          userId: this.userId,
          type: 'taskFollow',
        })
        .then((res) => {
          if (res.data) {
            this.empList = res.data
          }
        })
    },
    // 选择下拉
    handleSelect(field, fieldName) {
      if (field == 'empId') {
        this.updateColumns = this.empList
      }
      this.updateSelectVisible = true
      this.field = field
      this.fieldName = fieldName
      this.likeWhoField = field
    },
    // 选择下拉确认
    handleSelectConfirm(value) {
      this.updateServiceData[this.field] = value ? value.billId : ''
      this.updateServiceData[this.fieldName] = value ? value.name : ''
      this.likeWho = ''
      this.likeWhoField = ''
      this.updateSelectVisible = false
    },
    beforeCloseUpdateTel(action, done) {
      if (action === 'confirm') {
        return done(false)
      } else {
        return done()
      }
    },
    handleEditSa() {
      this.getEmpPerson()
      this.editsaVisible = true
      this.updateServiceData.currentServerPsnName = this.dataSource.empName
      this.updateServiceData.billId = this.dataSource.billId
    },
    updateServiceConfirm() {
      if (!this.updateServiceData.empId) {
        Toast('请选择服务顾问')
        return
      }
      repairApi
        .updateRepairBookServer({
          ...this.updateServiceData,
        })
        .then((res) => {
          if (res.code != 0) {
            Toast('修改成功')
            this.getDetail(this.dataSource.billId)
          } else {
            Toast(res.msg)
          }
          this.editsaVisible = false
        })
    },
  },
}
</script>

<style lang="less" scoped>
//@font-face {
//  font-family: 'Alibaba';
//  src: url('~@/assets/fonts/alibaba2.ttf');
//}

body {
  //font-family: Alibaba;
}
.flex {
  display: flex;
  align-items: center;
}
.registerDetail {
  overflow: hidden;
  background: #f3f3f3;
  padding-bottom: 1.5rem;

  .detail_header {
    justify-content: space-between;
    margin: 0.2rem 0.2rem;
    border-radius: 5px;
    background: #fff;
    padding: 0.3rem;
    .detail_header_lt {
      .carNo {
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.2rem;
        .icon-right {
          margin-left: 0.2rem;
          color: #409eff;
        }
      }
      .hank {
        font-size: 0.28rem;
        color: #666;
      }
    }
    .detail_header_rt {
      justify-content: flex-start;
      .txt {
        font-size: 0.28rem;
        color: #161616;
      }
      .icon-tel {
        color: #fff;
        background: #35bc04;
        font-size: 0.32rem;
        padding: 0.1rem;
        border-radius: 50%;
        margin-right: 0.2rem;
      }
      .icon-wx {
        color: #409eff;
        font-size: 0.65rem;
      }
    }
  }
  .formData {
    background: #fff;
    padding-bottom: 0.5rem;
  }
}
/deep/.van-field__error-message {
  text-align: right;
}
.footerBtn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding-bottom: 0.4rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

  .submitBtn {
    width: 80%;
    margin: auto;
    margin-top: 0.3rem;
    justify-content: space-between;
    overflow: hidden;
    box-sizing: content-box;

    .btnbox {
      width: 100%;
      font-size: 0.28rem;
      padding: 0.25rem 0;
      border-radius: 5px;
      text-align: center;
      color: #fff;
      box-sizing: content-box;
    }
    .editBtn {
      background: linear-gradient(316deg, #3975c6 0%, #71a4ea 100%);

      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
    }
    .cancelBtn {
      background: #e31010;
      margin-right: 10px;
    }
  }
}

.cancelbox {
  border-top: 5px solid #f3f3f3;
  margin-bottom: 1.5rem;
}
.contact_list {
  padding: 0.5rem 0.2rem 0 0.2rem;
  .contact_item {
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .contact_lt {
    font-size: 0.28rem;
    color: #23ec1c;
    .contact_header {
      width: 30px;
      height: 30px;
      display: block;
      border-radius: 5px;
      margin-right: 5px;
    }

    .contact_name {
      font-size: 0.28rem;
      color: #333;
      margin-left: 5px;
    }
    .contact_com {
      color: #f65e07;
      font-size: 0.28rem;
    }
    .contact_com_wx {
      color: #23ec1c;
      font-size: 0.28rem;
    }
  }
  .contact_btn {
    background: #409eff;
    color: #fff;
    padding: 5px 15px;
    border-radius: 3px;
    font-size: 0.28rem;
  }
}
.task_header {
  background: url('~@/assets/images/title_bg.png') no-repeat center;
  font-size: 0.24rem;
  height: 50px;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;

  .top_title {
    position: relative;
    width: 100%;
    height: 50px;

    .top_title_back {
      position: absolute;
      left: 10px;
      line-height: 50px;
      color: #fff;
    }

    .top_title_val {
      text-align: center;
      line-height: 50px;
      color: #fff;
      font-weight: bold;
      font-size: 16px;
    }
    .task_transbox {
      position: absolute;
      right: 10px;
      top: 18px;
      color: #fff;
      z-index: 10;
      font-weight: 400;
      font-size: 14px;
      text-align: center;
      .task_trans {
        width: 24px;
        display: block;
        margin: auto;
      }
    }
  }

  .task_header_data {
    .task_header_date {
      margin-bottom: 10px;
      display: flex;
      align-items: center;

      .task_header_date_w {
        width: 12.5%;
      }

      .task_header_date_item {
        width: 12.5%;
        text-align: center;
        color: #fff;
        font-size: 14px;
      }
    }

    .task_header_followData {
      display: flex;
      align-items: center;
      color: #fff;
      margin-bottom: 10px;

      .task_header_followData_tt {
        width: 12.5%;
        text-align: center;
      }

      .task_header_followData_item {
        width: 12.5%;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
      }
    }
  }
}
.task_detail {
  position: fixed;
  top: 50px;
  left: 0;
  width: 100%;
  z-index: 100;
  .task_detail_header {
    padding: 17px 0 10px;
    background: #fff;
    // margin-bottom: 10px;
    border-bottom: 1px solid #f1f1f1;
    position: relative;

    .title {
      text-align: center;
      //font-family: Alibaba;
      font-weight: 700;
      font-size: 16px;
      color: #333333;
      max-width: 60%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      margin: auto;
      .icon-edit {
        font-size: 14px;
      }
    }
    .name {
      display: flex;
      text-align: center;
      width: 100%;
      justify-content: center;
      margin-top: 10px;

      .txt {
        //font-family: Alibaba;
        font-weight: 400;
        font-size: 12px;
        color: #999999;
        text-align: center;
        margin-right: 10px;
      }
    }
    .status {
      //font-family: Alibaba;
      font-weight: 700;
      font-size: 12px;
      text-align: center;
      position: absolute;
      top: 16px;
      right: 10px;
      border-radius: 2px;
      padding: 5px;
      display: flex;
      align-items: center;
      .status_icon {
        width: 12px;
        margin-right: 4px;
      }
      &.status1 {
        color: #ff1100;
        background: rgba(255, 48, 33, 0.2);
      }
      &.status2 {
        color: #00b42a;
        background: #e8ffea;
      }
    }
  }
  .tabbox {
    // padding: 0 10px;
    padding-top: 15px;
    border-top: 1px solid #f7f5f5;
    margin-top: 15px;
    position: relative;
    width: 7.5rem;
    overflow: hidden;
    .tab_list {
      width: 10rem;
      overflow-x: auto;
      clear: both;
      .tab_item {
        font-weight: 400;
        font-size: 14px;
        color: #4e5969;
        text-align: center;
        background: #f7f7f7;
        border-radius: 32px;
        padding: 8px 16px;
        margin-right: 6px;
        cursor: pointer;
        float: left;
        &:last-child {
          margin-right: 0;
        }
        &.active {
          color: #165dff;
          text-align: center;
          background: #d8e3ff;
        }
      }
    }
  }
}
.detailbox_item {
  margin-top: 10px;
  background: #fff;
  padding: 10px;
  .detailbox_item_title {
    font-size: 16px;
    font-weight: 700;
    color: #1d2129;
    margin-bottom: 14px;
    background: url('~@/assets/images/ttbg.png') no-repeat left bottom;
    background-size: 32px 6px;
  }
  .detail_content {
    background: #f9fafc;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #fbfcfe;
    padding: 17px 16px;

    .task_item_type {
      margin-bottom: 20px;

      .task_item_tt {
        font-weight: 800;
        font-size: 12px;
        color: #86909c;
        margin-bottom: 10px;
      }
      .task_item_val {
        font-weight: 700;
        font-size: 16px;
        color: #333333;
      }
      .task_item_desc {
        font-weight: 300;
        font-size: 14px;
        color: #000000;
        background: #f2f3f5;
        padding: 5px 6px;
      }
    }
    .task_itembox {
      overflow: hidden;
      .task_itembox_con {
        width: 50%;
        margin-bottom: 15px;
        float: left;
        .task_label {
          font-weight: 400;
          font-size: 12px;
          color: #86909c;
          margin-bottom: 5px;
        }
        .task_value {
          font-weight: 700;
          font-size: 16px;
          color: #2f2f2f;
        }
      }
    }
  }
  .relat_tab {
    display: flex;
    margin-bottom: 10px;
    .relat_tab_item {
      font-weight: 500;
      font-size: 12px;
      color: #333333;
      border-radius: 4px;
      padding: 5px 8px;
      background: #f7f7f7;
      margin-right: 5px;
      &.active {
        color: #165dff;
        background: #d8e3ff;
      }
    }
  }
  .relat_content {
    .relat_item {
      background: #ffffff;
      box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.09);
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #fbfcfe;
      margin-bottom: 20px;
      padding: 10px 9px 12px;

      .relat_content_header {
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;

        .name {
          font-weight: bold;
          font-size: 14px;
          color: #333333;
        }
        .status {
          font-weight: 700;
          font-size: 12px;
          color: #00b42a;
          background: #e8ffea;
          border-radius: 2px 2px 2px 2px;
          padding: 5px 8px;
          &.status2 {
            background: rgba(255, 48, 33, 0.2);
            color: #ff1100;
          }
        }
      }
      .relat_carInfo {
        font-weight: 300;
        font-size: 14px;
        color: #000000;
        background: #f2f3f5;
        padding: 5px 6px;
        margin-bottom: 12px;
      }
      .relat_user {
        display: flex;
        justify-content: space-between;
        font-weight: bold;
        font-size: 12px;
        color: #165dff;
        background: #e8f5ff;
        border-radius: 2px 2px 2px 2px;
        padding: 5px 6px;
      }
    }
  }
  .followInfo_content {
    .followInfo_item {
      padding: 10px 0px 10px 20px;

      .followInfo_top {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .followInfo_circle {
          background: #f2f2f2;
          border-radius: 50%;
          width: 9px;
          height: 9px;
          margin-right: 10px;
        }
        .followInfo_name {
          font-weight: 700;
          font-size: 14px;
          color: #86909c;
        }
      }

      .followInfo_box {
        display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;

        .followInfo_linebox {
          width: 1px;
          position: relative;
          -ms-flex-item-align: stretch;
          align-self: stretch;
          background: #f2f2f2;
          margin: 0 10px 0 4px;
        }
        .followInfo_val {
          width: 100%;
          padding: 12px 16px;
          background: #f9fafc;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #fbfcfe;
          flex: 1;
          .followInfo_val_item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            .item_label {
              font-weight: 400;
              font-size: 14px;
              color: #86909c;
            }
            .item_val {
              font-weight: 700;
              font-size: 14px;
              color: #2f2f2f;
            }
          }
          .followInfo_val_item2 {
            .item_label {
              font-weight: 400;
              font-size: 14px;
              color: #86909c;
              margin-bottom: 10px;
            }
            .item_val {
              font-weight: 300;
              font-size: 14px;
              color: #86909c;
              background: #f2f3f5;
              padding: 5px 6px;
            }
          }
        }
      }
      &.active {
        .followInfo_top {
          .followInfo_circle {
            background: #165dff;
          }
          .followInfo_name {
            color: #165dff;
          }
        }
        .followInfo_box {
          .followInfo_linebox {
            background: #165dff;
          }
        }
      }
    }
  }
  .carInfo_content {
    background: #f9fafc;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #fbfcfe;
    padding: 7px 16px;
    .carInfo_item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      .item_label {
        font-weight: 400;
        font-size: 12px;
        color: #86909c;
      }
      .item_val {
        font-weight: 700;
        font-size: 12px;
        color: #333333;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .contact_content {
    .contact_item {
      box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.02);
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #f4f4f6;
      margin-bottom: 3px;
      padding: 12px 10px 12px 10px;

      .contact_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 14px;
        .item_label {
          font-weight: 700;
          font-size: 12px;
          color: #165dff;
          background: #e8f5ff;
          border-radius: 2px 2px 2px 2px;
          padding: 4px 5px;
        }
        .item_icon {
          display: flex;
          .item_img {
            width: 29px;
            height: 29px;
            margin-right: 17px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
      .contact_bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 4px;
        .item_name {
          display: flex;

          .txt1 {
            font-weight: 400;
            font-size: 12px;
            color: #86909c;
          }
          .txt2 {
            font-weight: 700;
            font-size: 12px;
            color: #2f2f2f;
          }
        }
      }
    }
  }

  .repair_content {
    .repair_list {
      .repair_item {
        box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #f4f4f6;
        padding: 10px;
        margin-bottom: 10px;
        .item_top {
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #f7f5f5;
          padding-bottom: 10px;
          .item_num {
            display: flex;
            .item_icon {
              width: 11px;
              margin-right: 5px;
            }
            .item_name {
              font-weight: 800;
              font-size: 14px;
              color: #333333;
            }
          }
          .item_btn {
            font-weight: 400;
            font-size: 12px;
            color: #165dff;
          }
        }
        .item_bottom {
          padding-top: 8px;
          .item_box {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            align-items: center;
            width: 100%;

            .item_lt {
              display: flex;

              .item_lable {
                font-weight: 400;
                font-size: 12px;
                color: #86909c;
              }
              .item_val {
                font-weight: 400;
                font-size: 12px;
                color: #2f2f2f;
              }
            }
            .item_rt {
              background: #e8f5ff;
              border-radius: 2px 2px 2px 2px;
              font-weight: 700;
              font-size: 10px;
              color: #165dff;
              padding: 3px 5px;
              display: flex;

              .item_lable {
              }
              .item_val {
              }
            }
          }
          .item_box2 {
            .item_lt {
              display: flex; /* 使用弹性盒模型 */
              .item_lable {
                font-weight: 400;
                font-size: 12px;
                color: #86909c;
                width: 60px;
              }
              .item_val {
                font-weight: 400;
                font-size: 12px;
                color: #2f2f2f;
                width: calc(100% - 60px);
              }
            }
          }
        }
      }
    }
  }

  .card_content {
    min-height: calc(100vh - 150px);

    .card_item {
      border-radius: 4px;
      position: relative;
      height: 86px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      background: #fff;
      .item_lt {
        width: 134px;
        height: 86px;
        font-weight: 700;
        font-size: 36px;
        line-height: 86px;
        color: #ffffff;
        background: url('~@/assets/images/card_bg.png') no-repeat center;
        background-size: 134px 86px;
        text-align: center;
        margin-right: 10px;
        border-radius: 0px 12px 12px 0px;
      }
      .item_rt {
        padding-top: 10px;
        .item_name {
          margin-bottom: 8px;
          font-weight: 700;
          font-size: 14px;
          color: #2f2f2f;
        }
        .item_number {
          font-weight: 700;
          font-size: 12px;
          color: #2f2f2f;
          margin-bottom: 8px;
        }
        .item_time {
          font-weight: 400;
          font-size: 12px;
          color: #86909c;
          display: flex;
          .txt1 {
            margin-right: 10px;
          }
        }
      }
      .item_type {
        font-weight: 700;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        padding: 5px 10px;
        border-radius: 0px 4px 0px 4px;
        background: #ff2b2b;
        position: absolute;
        top: 0px;
        right: 0;
      }
    }
  }

  .no_icon {
    padding: 25px;
    .no_icon_img {
      width: 70px;
      display: block;
      margin: auto;
    }
    .no_icon_txt {
      font-weight: 400;
      font-size: 14px;
      color: #86909c;
      text-align: center;
      margin-top: 10px;
    }
  }
}
.mb80 {
  margin-bottom: 80px;
}
.mt0 {
  margin-top: 0px;
}
.mt175 {
  margin-top: 175px;
}
.mt160 {
  margin-top: 165px;
}
.mt122 {
  margin-top: 122px;
}
.mb60 {
  margin-bottom: 60px;
}
.detailbg {
  background: #f3f3f3;
}
</style>
